/<template>
  <div>
    <header>
      <span>返回</span>
      <input type="text" v-model="keyWord" @input="searchList">
      <span>搜索</span>
    </header>
    <h2>搜索结果</h2>
    <ul>
      <li v-for="item in newArr" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data(){
    return  {
      keyWord:'',  //关键字
      data:[],// 全部数据
      newArr:[],//搜索后的新数据
      timer:null //节流函数延时器
    }
  },
  //渲染完成后，发起请求
  mounted(){
    axios.get('/service').then(res=>{
      this.data=res.data
    })
  },
  methods:{
    //搜索函数
    searchList(){
      // 判断非空
      if(this.keyWord){  //如果不为空
        //清除延时器
        clearTimeout(this.timer);
        // 定义延时器
        this.timer=setTimeout(()=>{
          // 数据查询
          this.newArr=this.data.filter(item=>{
            return  item.name.includes(this.keyWord)
          })
        },500)
      }else{  //如果为空，渲染新数据
        this.newArr=[]
      }
    }
  },
  // 销毁之前
  destroyed() {
    //清除延时器
    clearTimeout(this.timer)
  },
}
</script>

<style>

</style>